<!-- 自定义顶部栏 -->
<template>
	<view class="navbar-container">
		<view class="navbar">
			<!-- 状态栏 -->
			<view class="status-bar" :style="{ height: statusBarHeight }"></view>

			<view class="nav-row">
				<view class="layer">
					<view v-if="isLogin" @click="handleExit" style="margin-left: 20rpx;">
						<u-avatar src="https://tse2-mm.cn.bing.net/th/id/OIP-C.LbsebeEI-ChTrFFGWIVbwwAAAA?rs=1&pid=ImgDetMain" size="30"></u-avatar>
					</view>
					<view class="menu-button" v-else @click="navTo('/pages/login/login')" :style="{ height: menuBtnH }">
						<u-icon name="account" size="20" color="#000000"></u-icon>
					</view>
					<text class="program-title">{{ navigationBarTitleText }}</text>
				</view>
			</view>
		</view>
		<view class="block" :style="{ height: epmptyHeight }" />
	</view>
</template>
	
<script>
import { mapState } from 'vuex'
import store from '../../store';
export default {
	name: "ms-navbar",
	data() {
		return {
			// 系统信息
			systemInfo: null,
			menuButtonInfo: null,
			popupVisible: false,
		};
	},
	computed: {
		...mapState(['navigationBarTitleText','isLogin']),
		// 状态栏高度
		statusBarHeight() {
			return this.systemInfo && this.systemInfo.statusBarHeight + 'px'
		},
		epmptyHeight(){
			return  88 + 'px'
		},
		menuBtnH() {
			const {
				height = 20
			} = this.menuButtonInfo || {}
			return height + 'px'
		},
	},
	mounted() {
		/* 获取系统信息 */
		this.systemInfo = uni.getSystemInfoSync()
		this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()

		console.log('systemInfo',this.systemInfo);
		console.log('menuButtonInfo',this.menuButtonInfo);
		console.log('onshow',getCurrentPages());
	},
	methods: {
		navTo(url) {
			this.popupVisible = false
			uni.navigateTo({
				url
			})
		},
		share() {
			this.popupVisible = false
			// TODO 开启分享
		},
		handleExit(){
			uni.showModal({
				title:'提示',
				content:'是否退出登录？',
				success(res) {
					if(res.confirm){
						store.commit('setLogin',false)
					}
				},
				fail() {}
			})
		}
	},
}
</script>

<style lang="scss">
$bk: #F8F8F8;
$navrowH: 88rpx;

.navbar-container {
	width: 100vw;
	position: relative;
	left: -20rpx;
	z-index: 10075;
	.navbar{
		width: 100vw;
		position: fixed;
		top: 0	;
	}


	.status-bar {
		width: 100%;
		background-color: $bk;
	}


	.nav-row {
		width: 100%;
		height: $navrowH;
		position: relative;
		z-index: 10075;

		.layer {
			position: absolute;
			top: 0;
			left: 0;

			width: 100%;
			height: $navrowH;
			background-color: $bk;
			border-bottom: 2rpx solid #f2f2f2;
			box-sizing: border-box;

			display: flex;
			justify-content: space-between;
			align-items: center;


			/* #ifdef MP-TOUTIAO */
			padding-left: calc(40 * 2rpx);
			padding-right: calc(150 * 2rpx);
			padding-top: 14rpx;
			/* #endif */


			.program-title {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}


	}
}


.nav-row {

	.menu-button {
		cursor: pointer;
		padding: 0 40rpx;
		margin-left: 10rpx;
		border-radius: 100rpx;
		border: 2rpx solid #E7E7E7;
		background-color: #FEFEFE;

		display: flex;
		justify-content: center;
		align-items: center;

		&:active {
			background-color: #ffffff;
		}
	}
}

.pop-container {
	margin-top: $navrowH;
	padding: 40rpx;

	.more-list {

		.more-item {
			padding: 20rpx;
			display: flex;
			align-items: center;
			gap: 10rpx;

			&:nth-last-child(n+2) {
				border-bottom: 2px solid #f2f2f2f2;
			}
		}
	}
}

.share-btn {
	background-color: transparent;
	padding: 0;
	margin: 0;
	border: none;
	width: 100%;
	height: fit-content;
	border-radius: none;
	font-size: inherit;
	display: inline;
	text-align: left;

	&::after {
		content: none;
	}
}
</style>